<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>密码管理器</title>
    <style>
        body {
            width: 400px;
            padding: 15px;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .tab-container {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        .tab {
            padding: 8px 16px;
            cursor: pointer;
            border: none;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .tab.active {
            background: #4CAF50;
            color: white;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .search-box {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .password-list {
            max-height: 300px;
            overflow-y: auto;
        }
        .password-item {
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .button {
            background-color: #4CAF50;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #45a049;
        }
        .help-section {
            line-height: 1.6;
        }
        .help-section h3 {
            color: #4CAF50;
        }
        .security-score {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
        }
        .score-bar {
            height: 8px;
            flex-grow: 1;
            background: #eee;
            border-radius: 4px;
        }
        .score-fill {
            height: 100%;
            background: #4CAF50;
            border-radius: 4px;
            transition: width 0.3s;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>密码管理器</h2>
            <button id="lockButton" class="button">
                <img src="icons/lock.svg" width="16" height="16" style="vertical-align: middle;">
                锁定
            </button>
        </div>

        <div class="tab-container">
            <button class="tab active" data-tab="passwords">密码列表</button>
            <button class="tab" data-tab="generator">密码生成</button>
            <button class="tab" data-tab="security">安全中心</button>
            <button class="tab" data-tab="help">使用帮助</button>
        </div>

        <!-- Passwords Tab -->
        <div id="passwords" class="tab-content active">
            <input type="text" class="search-box" placeholder="搜索网站...">
            <div class="password-list" id="passwordList">
                <!-- Password items will be inserted here -->
            </div>
            <button id="addPassword" class="button">添加新密码</button>
        </div>

        <!-- Generator Tab -->
        <div id="generator" class="tab-content">
            <h3>密码生成器</h3>
            <div class="generator-options">
                <label>长度: <input type="number" id="passLength" value="16" min="8" max="64"></label>
                <label><input type="checkbox" id="useUppercase" checked> 大写字母</label>
                <label><input type="checkbox" id="useLowercase" checked> 小写字母</label>
                <label><input type="checkbox" id="useNumbers" checked> 数字</label>
                <label><input type="checkbox" id="useSymbols" checked> 特殊符号</label>
            </div>
            <input type="text" id="generatedPassword" class="search-box" readonly>
            <button id="generateButton" class="button">生成密码</button>
            <button id="copyButton" class="button">复制</button>
        </div>

        <!-- Security Tab -->
        <div id="security" class="tab-content">
            <h3>安全仪表盘</h3>
            <div class="security-score">
                <span>总体评分:</span>
                <div class="score-bar">
                    <div class="score-fill" style="width: 75%"></div>
                </div>
                <span>75%</span>
            </div>
            <div id="securityChecklist">
                <h4>安全检查清单</h4>
                <ul>
                    <li>主密码强度</li>
                    <li>弱密码 (发现3个)</li>
                    <li>重复密码 (发现2个)</li>
                    <li>过期密码 (发现5个)</li>
                </ul>
            </div>
            <button id="exportData" class="button">导出数据</button>
            <button id="importData" class="button">导入数据</button>
        </div>

        <!-- Help Tab -->
        <div id="help" class="tab-content">
            <div class="help-section">
                <h3>快速入门指南</h3>
                <ol>
                    <li>设置主密码来保护您的数据</li>
                    <li>访问任何网站并正常登录</li>
                    <li>插件会提示是否保存密码</li>
                    <li>下次访问时将自动填充密码</li>
                </ol>

                <h3>功能特性</h3>
                <ul>
                    <li>自动保存密码</li>
                    <li>安全的密码生成器</li>
                    <li>密码强度检测</li>
                    <li>自动填充功能</li>
                    <li>数据导入导出</li>
                </ul>

                <h3>安全提示</h3>
                <ul>
                    <li>使用强密码作为主密码</li>
                    <li>启用自动锁定功能</li>
                    <li>定期更新密码</li>
                    <li>避免重复使用密码</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>
